<template>
	<div>
		<van-nav-bar
		  title="商城"
		/>
		<van-tabs v-model="queryForm.goodsTypeId"
			@change="handleGoodsTypeChange">
		  <van-tab 
				v-for="item in goodsTypeList"
				:key="item.id"
				:title="item.name" 
				:name="item.id"></van-tab>
		</van-tabs>
		<p-page-helper :disabled="loading" @on-end="handleOnEnd">
			<van-card
				v-for="item in list"
				:key="item.id"
			  :num="item.count"
			  :price="item.price*item.discount/10"
			  :desc="item.description"
			  :title="item.name"
			  :thumb="item.logo"
			  :origin-price="item.price"
				
				@click="handleGoodsInfo(item)"
			>
				<template #tags>
					<div>
						销量：{{item.saleCount}}
					</div>
				</template>
			</van-card>
		</p-page-helper>
		
	</div>
</template>

<script>
	import {getGoodsTypeList,getGoodsListForPage} from '@/api/shop-api.js'
	export default{
		data(){
			return {
				goodsTypeList:[],
				queryForm:{
					goodsTypeId:'',
					pno:1,
					psize:10,
					isOnSale:1
				},
				list:[],
				page:{},
				loading:false
			}
		},
		async created(){
			await this.getGoodsTypeList()
			await this.getGoodsListForPage()
		},
		methods:{
			async getGoodsTypeList(){
				let res = await getGoodsTypeList();
				if(res.data.code == 200){
					this.goodsTypeList = res.data.data.list
					this.queryForm.goodsTypeId = this.goodsTypeList[0].id
					
				}
			},
			async getGoodsListForPage(){
				let res = await getGoodsListForPage(this.queryForm)
				if(res.data.code ==200){
					this.list = res.data.data.list
					this.page = res.data.data.page
				}
			},
			async handleGoodsTypeChange(res){
				this.queryForm.goodsTypeId = res
				this.queryForm.pno = 1
				this.loading = false
				await this.getGoodsListForPage()
			},
			async handleOnEnd(){
				if(this.loading ==false){
					this.loading = true
				}
				if(this.page.pno<this.page.pCount){
					this.queryForm.pno = this.queryForm.pno+1
					let res = await getGoodsListForPage(this.queryForm)
					if(res.data.code == 200){
						this.list = this.list.concat(res.data.data.list)
						this.page = res.data.data.page
						this.loading = false
					}
				}
				
			},
			handleGoodsInfo(item){
				console.log(item.id)
				this.$router.push({path:'/shop-info',query:{id:item.id}})
			}
		}
	}
</script>

<style>
</style>
